<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.1//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
    xmlns:vcard="http://www.w3.org/2006/vcard/ns#"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.w3.org/1999/xhtml
                        http://www.w3.org/MarkUp/SCHEMA/xhtml-rdfa-2.xsd"
    xml:lang="en">
    <head profile="http://dublincore.org/documents/dcq-html/">
        
        <title>Example with Google maps and RDFa - Google maps jQuery plugin</title>
        <meta name="keywords" content="Google maps, jQuery, plugin, RDFa" />
		<meta name="description" content="An example how to load markers with RDFa using jQuery and Google maps v3" />
		<meta http-equiv="content-language" content="en">
		
		<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
		<meta name="DC.title" content="Example with Google maps and RDFa - Google maps jQuery plugin" />
		<meta name="DC.subject" content="Google maps;jQuery;plugin;RDFa" />
		<meta name="DC.description" content="An example how to load markers with RDFa using jQuery and Google maps v3" />
		<meta name="DC.creator" content="Johan S&auml;ll Larsson" />
        <meta name="DC.language" content="en">
		
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
		
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" />
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" />	 
        <link rel="stylesheet" type="text/css" href="../thirdparty/SyntaxHighlighter/shCore.css" />
		<link rel="stylesheet" type="text/css" href="../thirdparty/SyntaxHighlighter/shThemeDefault.css" />		
		<link rel="stylesheet" type="text/css" href="css/main.css" />
        
        <script src="http://www.google.com/jsapi?key=ABQIAAAAahcO7noe62FuOIQacCQQ7RTHkUDJMJAZieEeKAqNDtpKxMhoFxQsdtJdv3FJ1dT3WugUNJb7xD-jsQ" type="text/javascript"></script>        
        <script type="text/javascript">
			google.load("maps", "3", {'other_params':'sensor=true'});
			google.load("jquery", "1.5");
			google.load("jqueryui", "1.8.9");
		</script>
        <script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
		<script src="../thirdparty/SyntaxHighlighter/shCore.js" type="text/javascript"></script>
      	<script src="../thirdparty/SyntaxHighlighter/shAutoloader.js" type="text/javascript"></script>
		<script src="../thirdparty/SyntaxHighlighter/shBrushJScript.js" type="text/javascript"></script>
		<script src="../thirdparty/SyntaxHighlighter/shBrushXml.js" type="text/javascript"></script>
        <script type="text/javascript">
			$(function() {
				// Only for code formatting
				SyntaxHighlighter.all();
				$('#sidebar-wrap').hide();
				$('#map_canvas').gmap({ 'center': getLatLng(), 'navigationControl': false, 'streetViewControl': false, 'callback': function() {
						$('#map_canvas').gmap('addSidebar', 'sidebar', google.maps.ControlPosition.LEFT_TOP);
						$('#map_canvas').gmap('loadHTML', 'rdfa', '.vevent');
					}
				});
				function getLatLng() {
					if ( google.loader.ClientLocation != null ) {
						return new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);	
					}
					return new google.maps.LatLng(59.3426606750, 18.0736160278);
				}
            });
		</script>

    </head>
    <body>
        <h1><a href="/">Google maps jQuery plugin</a> load markers with RDFa example</h1>
		
        <div id="sidebar-wrap">
            <div id="sidebar">
                <h3>Event</h3>
                <div class="vevent" typeof="vcard:Vevent">
                    <span class="datetime">
                        <abbr class="dtstart" property="vcard:dtstart" content="20101214" title="20101214">Tuesday December 14, 2010</abbr>
                    </span>
                    <span class="summary" property="vcard:summary">Robyn - Stockholm</span> at
                    <span class="venue location vcard" about="#venue">  
                        <span class="fn org"><a rel="vcard:urlofvenue" href="/venue/8473/STHLM/Stockholm/Berns-Salonger/">Berns Salonger</a></span>
                        <span class="address adr" property="vcard:adr">
                            <span typeof="vcard:address"> 
                                <span class="street-address" property="vcard:street-address">Berzelii Park</span>
                                <span class="locality" property="vcard:locality">Stockholm</span>, <span class="region" property="vcard:region">Stockholm</span>
                                <span class="geo hidden">
                                    <span property="geo:lat_long" content="59.3426606750, 18.0736160278">
                                </span>
                            </span>
                        </span>
                    </span>
                    <div class="website">Website: <a rel="nofollow" href="http://concertful.com/concert/robyn/" class="url">http://concertful.com/concert/robyn/</a></div>
                </div>
            </div>
        </div>
        
		<div id="map_canvas"></div>
		
		<h2>Using jquery with Google maps</h2>
		<p>
			Download <a href="http://jquery.com/">jQuery 1.4.X or higher</a> and <a href="http://jqueryui.com/">jQuery UI 1.8.X or higher</a> or
			use <a href="http://code.google.com/intl/sv-SE/apis/libraries/devguide.html">Googles</a> or <a href="http://www.asp.net/ajaxlibrary/cdn.ashx">Microsofts</a> 
			<abbr title="Content delivery network"><a href="http://en.wikipedia.org/wiki/Content_delivery_network">CDN</a></abbr>.
		</p>
		
		<div class="prettyprint">
			<pre class="brush: xml">
&lt;script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="PATH_TO_PLUGIN/jquery.ui.map.js" type="text/javascript"&gt;&lt;/script&gt;</pre>
		</div>
		
		<div class="prettyprint">
			<pre class="brush: js">
&lt;script type="text/javascript"&gt;
	$(function() {
		var latlng = new google.maps.LatLng(59.3426606750, 18.0736160278);
		$('#map_canvas').gmap({ 'center': latlng, 'navigationControl': false, 'callback': function () {
				$('#map_canvas').gmap('addSidebar', 'sidebar', google.maps.ControlPosition.LEFT_TOP);
				$('#map_canvas').gmap('loadHTML', 'rdfa', '.vevent');
			}
		});
	});
&lt;/script&gt;</pre>
		</div>
		
		<h2>More Google maps and jQuery examples</h2>
		<ul>
			<li><a href="jquery-mobile-example.html">Google maps with jQuery mobile example</a></li>
			<li><a href="advanced-example.html">Microformats, Google streetview and jQuery dialog example</a></li>
			<li><a href="other-examples.html">Click and drag events with Google geo search example</a></li>
			<li><a href="load JSON example.html">Import markers with JSON example</a></li>
			<li><a href="load Microformat example.html">Import markers with microformats example</a></li>
			<li><a href="load Microdata example.html">Import markers with microdata example</a></li>
			<li><a href="load Fusion.html">Import markers with Google Fusion tables</a></li>
			<li><a href="multiple maps example.html">Multiple maps on a single page example</a></li>
			<li><a href="basic-example.html">Google maps and jQuery example</a></li>
		</ul>
		
        <div id="ft" class="hidden">
        	Author: 
            <div id="hcard-Johan-Säll-Larsson" class="vcard">
                <span class="fn n">
                    <span class="given-name">Johan</span> 
                    <span class="family-name">Säll Larsson</span>
                </span>
                <span class="adr">
                    <span class="locality">Göteborg</span>,
                    <span class="country-name">Sweden</span>
            	</span>
            </div>
        </div>
		<script type="text/javascript">
			var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
			document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script type="text/javascript">
			try {
				var pageTracker = _gat._getTracker("UA-17614686-3");
				pageTracker._trackPageview();
			} catch(err) {}
		</script>
    </body>
</html>